<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.slide{position:relative;width: 320px;height: 480px;}
			.slide img{width: 100%;height: 100%;}
			.dot{position: absolute;height: 20px;width: 100%;left:0;bottom: 0;background-color: rgba(0,0,0,0.5);padding: 4px 0;text-align: center;}
			.dot span{display: inline-block;height: 12px;width: 12px;background-color: #fff;}
			.dot .active{background-color: #e33;}
			.prev,.next{position:absolute;top:215px;height: 50px;width: 50px;cursor: pointer;}
			.prev{left:10px;background: url('./images/prev.png') no-repeat center center / 100% auto;}
			.next{right:10px;background: url('./images/next.png') no-repeat center center / 100% auto;}
		</style>
	</head>
	<body>
		<div class="slide">
			<img src="./images/1.jpg" id="img">
			<div class="dot">
				<span class="active" id="1"></span>
				<span id="2"></span>
				<span id="3"></span>
			</div>
			<div class="btn prev" id="prev"></div>
			<div class="btn next" id="next"></div>
		</div>
		<script type="text/javascript">
			// 轮播图方法之一 改变图片路径法
			var img = document.getElementById('img');
			console.dir(img);
			var i = 1;
			setInterval(function(){
				if(i > 3){
					i = 1;
				}
				document.getElementById(i).classList.add('active'); // 第一步：让当前显示的图片对应的圆点变色
				for(var j = 1;j < 4;j++){ // 循环遍历图片数量，把跟当前图片数字不一样的圆点样式移除
					if(j !== i){
						document.getElementById(j).classList.remove('active');
					}
				}
				img.src = './images/'+i+++'.jpg';
				console.log(i);
			},2000);
		</script>
	</body>
</html>